<script setup lang="ts">
import { 
  getHomebannerAPI,
  getHomeCategoryAPI,
  getHomeHotAPI,
 } from '@/services/home';
import CustomNavbar from './components/CustomNavbar.vue';
import HotPanel from './components/HotPanel.vue';
import PageSkeleton from './components/PageSkeleton.vue'
import {onLoad} from '@dcloudio/uni-app';
import { ref } from 'vue';
import CategoryPanel from './components/CategoryPanel.vue';
import type { BannerItem,CategoryItem,HotItem } from '@/types/home';
import type { XtxGuessInstance } from '@/types/component';

const bannerList = ref<BannerItem[]>([])
const getBannerData = async ()=>{
  const res =  await getHomebannerAPI()
  bannerList.value = res.result
}

const categoryList = ref<CategoryItem[]>([])
const getHomeCategory = async ()=>{
  const res = await getHomeCategoryAPI()
  categoryList.value = res.result
}

const hotList = ref<HotItem[]>([])
const getHot = async()=>{
  const res = await getHomeHotAPI()
  console.log(res);
  
  hotList.value = res.result
}
const isLoading = ref(false)
onLoad(async()=>{
  isLoading.value = true
//   // 加载轮播数据
//  getBannerData()
//  // 加载分类数据
//  getHomeCategory()
//  // 热门推荐
//  getHot()
 await Promise.all([
  getBannerData(),
  getHomeCategory(),
  getHot()
 ])
 isLoading.value = false
})

// 获取猜你喜欢组件实例
const guessRef = ref<XtxGuessInstance>()
const onscrolltolower = ()=>{
  // 调用子组件的方法获取数据
  guessRef.value?.getMore()
}

const trigger = ref(false)
const onrefresherrefresh = async()=>{
  trigger.value = true
   // 加载轮播数据
//  await getBannerData()
//  // 加载分类数据
//  await getHomeCategory()
//  // 热门推荐
//  await getHot()
// Promise.all() 里面的请求同事发生，但是一起等待加载完毕
// 重置猜你喜欢的数据
guessRef.value?.reset()

await Promise.all(
  [getBannerData()
  ,getHomeCategory()
  ,getHot()
  ,guessRef.value?.getMore()
])
 trigger.value = false
}

</script>

<template>
  <CustomNavbar/>
  <!-- 滚动容器 -->
  <!-- 添加滚动触底事件 -->
  <!-- refresher-enabled开启刷新功能  
    refresherrefresh刷新事件
    refresher-triggered刷新动画
   -->
   <PageSkeleton v-if="isLoading"/>
   <template v-else>
    <scroll-view 
    refresher-enabled 
    @refresherrefresh="onrefresherrefresh"
    :refresher-triggered="trigger" 
    @scrolltolower="onscrolltolower" 
    class="scrollview" scroll-y>
      <XtxSwiper :list="bannerList"/>
      <CategoryPanel :list="categoryList"/>
      <HotPanel :list="hotList"/>
      <!-- 猜你喜欢 -->
      <XtxGuess ref="guessRef" />
    </scroll-view>
   </template>
  

</template>

<style lang="scss">
page{
  background-color: #f7f7f7;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.scrollview{
  flex: 1; 
}
</style>
